<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(70) + 'px' }"
			v-show="!hiddenModel">
			<text>{{classificationId.classificationName}}</text>
		</view>
		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> {{classificationId.classificationName}}</text>
		</view>


		<!-- <view class="tabsPosition">
			<v-tabs v-model="cIndex" :tabs="tabs" bgColor="transparent" activeColor="#386EFF" @change="e=>changeTab(e)"
				fontSize="28rpx"></v-tabs>

			<view class="flex-end sortPosition" style="color:#1a1a1a" @click="sortFn()">
				<text style="margin-right: 7rpx;color: #000000;">分类</text>
				<uv-icon name="grid" size="24" color="#000000" style="margin-left: 8rpx;"></uv-icon>
			</view>

		</view> -->

		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="flex-wrap-justifyBetween">

				<view class="templateCenter" v-for="(item,index) in list" :key="index" @click="sameStyle(item)">
					<image class="templateCenterImg" :src="item.outUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
						mode="aspectFill"></image>
					<view class="viewSearch">
						<image class="gradientImg" :src="PurpleBg" mode="aspectFill"></image>
						<view class="flex-around arrows text-align_center" style="width:342rpx">
							<view class="">
								<view style="color: #4053FB;">{{totelName(item.exposure)}}</view>
								<view style="color:#666666;">曝光量</view>
							</view>

							<view class="">
								<view style="color: #4053FB;">{{totelName(item.callCount)}}</view>
								<view style="color:#666666;">使用人数</view>
							</view>
						</view>
						<view class="sameStyle flex-between">


							<view class="sameStyleBtn flex ">
								剪同款
							</view>
						</view>
					</view>
				</view>

			</view>
		</mescroll-body>


		<!-- 	<uv-tabbar :value="value" @change="changeTabbar" activeColor="#0547fb">
			<uv-tabbar-item text="首页">


				<template v-slot:active-icon>
					<image class="icon" src="/static/eight/蒙版-3.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/eight/蒙版-2.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="模版中心">
				<template v-slot:active-icon>
					<image class="icon" src="/static/eight/蒙版-1.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/eight/蒙版-5.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="任务中心">
				<template v-slot:active-icon>
					<image class="icon" src="/static/eight/蒙版-5.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/eight/蒙版-4.png"></image>
				</template>
			</uv-tabbar-item>

		</uv-tabbar> -->


		<sunui-popup ref="videoNum">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>修改话题</text>
						<uni-icons @click='closeVideoNum()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="textarea-box ">
						<textarea placeholder-style="font-size:30rpx;" v-model="copywriting"
							placeholder="复制短视频抖音主页账号地址链接" maxlength="500" @input="descInput"
							style="height: 100%;background-color: #F6F8FF;" />
					</view>






					<view class="PublishTags flex" @click="videoNumBtn()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				pid: '',
				gradient: this.$imgs.gradient,
				group21: this.$imgs.group21,
				PurpleBg: this.$imgs.PurpleBg,
				cIndex: 1,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				tabs: [


				],
				list: [],
				classifyList: [],
				classificationId: '',
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: ""

			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.createdgetSystemInfo()
			this.classificationId = JSON.parse((decodeURIComponent(options.objs)));




			// this.templateClassificat()



		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		computed: {
			totelName: function() {
				return function(num) {
					if (num >= 10000000) { // 如果是千万
						let remainder = num % 10000000;
						let quotient = Math.floor(num / 10000000);
						let decimal = Math.floor(remainder / 1000000);
						return quotient + '.' + decimal + '千万';
					} else if (num >= 10000) { // 如果是万
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else { // 小于万
						if (num) {
							return num.toString();
						} else {
							return 0
						}
					}
				};
			}

		},
		onShow() {


			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});

		},
		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			navBack() {
				this.$sun.navBack()
			},
			changeTabbar(e) {
				console.log(e)
				if (e == 2) {
					this.$sun.navGo('/pagesA/creatCenter/creativeList/creativeListDetail')
				} else if (e == 1) {
					// this.$sun.navGo('/pagesA/creatCenter/realHotspots/realHotspots')
				} else {
					this.$sun.navSwitch('/pages/index/index')
				}

			},
			changeTab(e) {
				console.log(e)
				if (e == 0) {
					this.pid = 0
				} else {
					this.pid = this.classifyList[e - 1].id
				}
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			sameStyle(item) {
				this.$sun.navGo('/pagesA/creatCenter/creativeList/templateDetail?obj=' + encodeURIComponent(JSON.stringify(
					item)))

			},
			sortFn() {
				this.$sun.navGo('/pagesA/creatCenter/creativeList/templateClassification')
			},

			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.templateList,
					data: {



						classificationId: this.classificationId.id,


					}
				});
				if (result.errno == 0) {


					this.mescroll.endByPage(result.data.length, 10);
					if (scroll.num == 1) this.list = [];
					this.list = (result.data);

					console.log(this.list)
				}

			},
			async templateClassificat() {

				const result = await this.$http.get({
					url: this.$api.templateClassification,
					data: {

						// 上级id
						pid: 0,
						page: 0,
						limit: 40
						// pid: ''
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					this.tabs = result.data.map((item) => {
						return item.classificationName
					})
					this.tabs.unshift('全部')
					this.pid = 0

					this.classifyList = result.data

					console.log(this.tab)
					setTimeout(() => {
						this.cIndex = 0
					}, 300)

					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					});



				}

			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.icon {
			width: 56rpx;
			height: 56rpx;
		}

		.templateCenter {
			// margin-right: 10rpx;
			margin-top: 25rpx;
		}

		.templateCenterImg {
			width: 340rpx;
			height: 520rpx;
		}


		.viewSearch {
			position: relative;
		
			.arrows {
				position: absolute;
				top: 0;
				z-index: 88;
			}
		
			.sameStyle {
				padding: 12rpx 30rpx;
				width: 346rpx;
				position: absolute;
				top: 90rpx;
				z-index: 88;
				
		
				.sameStyleBtn {
					width: 345rpx;
					height: 60.68rpx;
					border-radius: 12rpx;
					background: linear-gradient(90.00deg, rgb(99, 91, 252), rgb(61, 82, 251) 100%);
					color: #fff;
				}
		
			}
		
			.gradientImg {
				margin-left: -2rpx;
				margin-top: -40rpx;
				width: 344rpx;
				height: 228.2rpx;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
		
			}
		
		}


		.tabsPosition {
			position: relative;

			.sortPosition {

				top: 14rpx;
				z-index: 9999;
				right: 0;
				// background-color: #e3edf5;
				position: absolute;
				padding: 0 20rpx;
			}

		}

		.search-content {

			background: #FFFFFF;

			margin-bottom: 30rpx;

			width: 520rpx;
			height: 80rpx;
			border-radius: 230rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			view {
				color: #fff;
			}

		}
	}
</style>